<template>
    <div class="pagenation-group">
        <ul>
            <li>
                <el-button @click="gotoThePage()">跳转</el-button>
            </li>
            <li>
                <el-input type="number" placeholder="输入页数" v-model="gotoPage"></el-input>
            </li>
            <li>
                <el-tooltip class="item" effect="dark" content="下一页" placement="top">
                    <el-button v-show="pagingInfo.page<pagingInfo.totalPage" @click="nextPage(pagingInfo.page+1)">
                        <i class="el-icon-caret-right"></i>
                    </el-button>
                </el-tooltip>
            </li>
            <li>
                <p><span>第{{pagingInfo.page}}页</span>/<span>共{{pagingInfo.totalPage == 0 ? 1 : pagingInfo.totalPage}}页</span></p>
            </li>
            <li>
                <el-tooltip class="item" effect="dark" content="上一页" placement="top">
                    <el-button v-show="pagingInfo.page>1" @click="nextPage(pagingInfo.page-1)">
                        <i class="el-icon-caret-left"></i>
                    </el-button>
                </el-tooltip>
            </li>
            <li>
                <p style="font-size:16px;color:#475669;">共{{pagingInfo.total}}条</p>
            </li>
        </ul>

    </div>
</template>
<style scoped lang="less">


</style>
<script type="text/ecmascript-6">
    export default {
        name: 'paging',
        props:["pagingInfo"],
        data(){
            return {
                gotoPage:1
            }
        },
        mounted:function(){
        },
        watch:{
            pagingInfo:function(){
                this.pagingInfo.totalPage=Math.ceil(this.pagingInfo.total/this.pagingInfo.perPage);
            }
        },
        methods : {
            nextPage:function(nextPage){
                this.$emit("gotoPage",nextPage)
            },
            gotoThePage:function(){

                this.gotoPage=parseInt(this.gotoPage);
                if(this.gotoPage == "NaN"){
                    this.gotoPage=1;
                  return;
                }
                if(this.gotoPage == this.pagingInfo.page){
                    return;
                }
                if(this.gotoPage>this.pagingInfo.totalPage){
                    this.gotoPage=this.pagingInfo.totalPage;
                }
                if(this.gotoPage<1){
                    this.gotoPage=1;
                }
                this.$emit("gotoPage",this.gotoPage);
            }
        }

    }
</script>